<template>
  <div class="system-status">
    <div class="status-grid">
      <!-- 服务器状态 -->
      <div class="status-card">
        <div class="status-header">
          <i class="iconfont icon-server"></i>
          <h3>服务器状态</h3>
        </div>
        <div class="status-content">
          <div class="status-item">
            <span class="status-label">状态:</span>
            <span :class="['status-value', statusClass(server.status)]">
              {{ server.status_text || server.status }}
            </span>
          </div>
          <div class="status-item">
            <span class="status-label">运行时间:</span>
            <span class="status-value">{{ server.uptime }}</span>
          </div>
          <div class="status-item">
            <span class="status-label">PHP版本:</span>
            <span class="status-value">{{ server.php_version }}</span>
          </div>
          <div class="status-item">
            <span class="status-label">负载:</span>
            <span class="status-value">
              {{ server.load['1分钟'] }}/{{ server.load['5分钟'] }}/{{ server.load['15分钟'] }}
            </span>
          </div>
        </div>
      </div>

      <!-- 内存状态 -->
      <div class="status-card">
        <div class="status-header">
          <i class="iconfont icon-memory"></i>
          <h3>内存状态</h3>
        </div>
        <div class="status-content">
          <div class="status-item">
            <span class="status-label">状态:</span>
            <span :class="['status-value', statusClass(memory.status)]">
              {{ memory.status_text || memory.status }}
            </span>
          </div>
          <div class="status-item">
            <span class="status-label">总量:</span>
            <span class="status-value">{{ memory.total }}</span>
          </div>
          <div class="status-item">
            <span class="status-label">已用:</span>
            <span class="status-value">{{ memory.used }}</span>
          </div>
          <div class="status-item">
            <span class="status-label">使用率:</span>
            <div class="progress-container">
              <div class="progress-bar" :style="progressStyle(memory.usage)"></div>
              <span class="progress-text">{{ memory.usage }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 磁盘状态 -->
      <div class="status-card">
        <div class="status-header">
          <i class="iconfont icon-disk"></i>
          <h3>磁盘状态</h3>
        </div>
        <div class="status-content">
          <div class="status-item">
            <span class="status-label">状态:</span>
            <span :class="['status-value', statusClass(disk.status)]">
              {{ disk.status_text || disk.status }}
            </span>
          </div>
          <div class="status-item">
            <span class="status-label">总量:</span>
            <span class="status-value">{{ disk.total }}</span>
          </div>
          <div class="status-item">
            <span class="status-label">剩余:</span>
            <span class="status-value">{{ disk.free }}</span>
          </div>
          <div class="status-item">
            <span class="status-label">使用率:</span>
            <div class="progress-container">
              <div class="progress-bar" :style="progressStyle(disk.usage)"></div>
              <span class="progress-text">{{ disk.usage }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据库状态 -->
      <div class="status-card">
        <div class="status-header">
          <i class="iconfont icon-database"></i>
          <h3>数据库状态</h3>
        </div>
        <div class="status-content">
          <div class="status-item">
            <span class="status-label">状态:</span>
            <span :class="['status-value', statusClass(database.status)]">
              {{ database.status_text || database.status }}
            </span>
          </div>
          <div class="status-item">
            <span class="status-label">连接数:</span>
            <span class="status-value">{{ database.connections }}</span>
          </div>
        </div>
      </div>

      <!-- 进程状态 -->
      <div class="status-card">
        <div class="status-header">
          <i class="iconfont icon-process"></i>
          <h3>进程状态</h3>
        </div>
        <div class="status-content">
          <div class="status-item">
            <span class="status-label">状态:</span>
            <span :class="['status-value', statusClass(process.status)]">
              {{ process.status_text || process.status }}
            </span>
          </div>
          <div class="status-item">
            <span class="status-label">进程数:</span>
            <span class="status-value">{{ process.count }}</span>
          </div>
        </div>
      </div>

      <!-- 最后更新时间 -->
      <div class="status-card">
        <div class="status-header">
          <i class="iconfont icon-time"></i>
          <h3>最后更新时间</h3>
        </div>
        <div class="status-content">
          <div class="status-item">
            <span class="status-value">{{ formatTime(last_updated) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SystemStatus',
  props: {
    statusData: {
      type: Object,
      default: () => ({
        server: {
          status: "normal",
          uptime: "未知",
          load: {
            "1分钟": 0,
            "5分钟": 0,
            "15分钟": 0
          },
          php_version: "7.4.33"
        },
        memory: {
          total: "0 GB",
          used: "0 GB",
          usage: "0%",
          status: "normal"
        },
        disk: {
          total: "39.07 GB",
          free: "23.27 GB",
          usage: "40.44%",
          status: "normal"
        },
        database: {
          status: "normal",
          connections: 1,
          status_text: "运行正常"
        },
        process: {
          count: "未知",
          status: "normal"
        },
        last_updated: "2025-08-11 04:23:57"
      })
    }
  },
  computed: {
    server() {
      return this.statusData.server || {};
    },
    memory() {
      return this.statusData.memory || {};
    },
    disk() {
      return this.statusData.disk || {};
    },
    database() {
      return this.statusData.database || {};
    },
    process() {
      return this.statusData.process || {};
    },
    last_updated() {
      return this.statusData.last_updated || "";
    }
  },
  methods: {
    formatTime(timeString) {
      if (!timeString) return "";
      return new Date(timeString).toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit"
      });
    },
    statusClass(status) {
      const statusMap = {
        normal: "status-normal",
        warning: "status-warning",
        error: "status-error",
        critical: "status-critical"
      };
      return statusMap[status] || "status-normal";
    },
    progressStyle(usage) {
      const percentage = parseFloat(usage) || 0;
      let color = "#28C76F"; // 正常状态 - 绿色
      
      if (percentage > 80) {
        color = "#EA5455"; // 危险状态 - 红色
      } else if (percentage > 60) {
        color = "#FF9F43"; // 警告状态 - 橙色
      }
      
      return {
        width: `${percentage}%`,
        backgroundColor: color
      };
    }
  }
}
</script>

<style scoped>
.system-status {
  width: 100%;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.status-card {
  background-color: var(--v-card-bg);
  border-radius: var(--v-card-radius);
  box-shadow: var(--v-shadow);
  padding: 20px;
  transition: all 0.3s ease;
}

.status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.status-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--v-border-color);
}

.status-header i {
  font-size: 24px;
  margin-right: 10px;
  color: var(--v-theme);
}

.status-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--v-text-darker);
}

.status-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-label {
  font-size: 14px;
  color: var(--v-text-light);
}

.status-value {
  font-size: 14px;
  font-weight: 500;
}

.status-normal {
  color: #28C76F;
}

.status-warning {
  color: #FF9F43;
}

.status-error {
  color: #EA5455;
}

.status-critical {
  color: #EA5455;
  font-weight: bold;
}

.progress-container {
  width: 100%;
  height: 8px;
  background-color: var(--v-background);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.progress-text {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
</style>